---
title: 데이터 가져오기
description: fetch API를 사용하여 Astro로 원격 데이터를 가져오는 방법을 알아보세요.
i18nReady: true
---

`.astro` 파일은 페이지 생성에 도움이 되는 원격 데이터를 가져올 수 있습니다.

## Astro의 `fetch()` 함수

모든 Astro 컴포넌트는 스크립트에서 [전역 `fetch()` 함수](https://developer.mozilla.org/ko/docs/Web/API/fetch)를 사용할 수 있습니다. 이 함수는 전체 URL(예: https://example.com/api 또는 `Astro.url + "/api"`)을 사용해 API에 HTTP 요청을 보내기 위해 사용됩니다.

이 fetch 호출은 빌드 시 실행되며, 가져온 데이터는 동적 HTML을 생성하기 위해 컴포넌트 템플릿에서 사용할 수 있습니다. [SSR](/ko/guides/server-side-rendering/) 모드가 활성화되면 모든 fetch 호출이 런타임에 실행됩니다.

💡 Astro 컴포넌트 스크립트에서 [**최상위 await**](https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/await)을 활용하세요.

💡 가져온 데이터를 Astro 및 프레임워크 컴포넌트에 props로 전달할 수 있습니다.

```astro /await fetch\\(.*?\\)/
---
// src/components/User.astro
import Contact from '../components/Contact.jsx';
import Location from '../components/Location.astro';

const response = await fetch('https://randomuser.me/api/');
const data = await response.json();
const randomUser = data.results[0];
---
<!-- 빌드 시 가져온 데이터를 HTML로 렌더링할 수 있습니다. -->
<h1>User</h1>
<h2>{randomUser.name.first} {randomUser.name.last}</h2>

<!-- 빌드 시 가져온 데이터는 컴포넌트의 props로 전달할 수 있습니다. -->
<Contact client:load email={randomUser.email} />
<Location city={randomUser.location.city} />
```

:::note
Astro 컴포넌트의 모든 데이터는 컴포넌트가 렌더링될 때 가져온다는 사실을 기억하세요.

배포된 Astro 사이트는 **빌드 시점**에 데이터를 **한 번** 가져옵니다. 개발 환경에서는 컴포넌트가 갱신될 때마다 데이터를 가져옵니다. 클라이언트 측에서 데이터를 여러 번 다시 가져와야 하는 경우, [프레임워크 컴포넌트](/ko/guides/framework-components/)를 사용하거나 Astro 컴포넌트에서 [클라이언트 측 스크립트](/ko/guides/client-side-scripts/)를 사용하세요.

:::

## 프레임워크 컴포넌트의 `fetch()` 함수

`fetch()` 함수는 모든 [프레임워크 컴포넌트](/ko/guides/framework-components/)에서 전역적으로 사용할 수도 있습니다.

```tsx title="src/components/Movies.tsx" /await fetch\\(.*?\\)/
import type { FunctionalComponent } from 'preact';

const data = await fetch('https://example.com/movies.json').then((response) => response.json());

// 빌드 시 렌더링된 컴포넌트에서는 CLI에 기록됩니다.
// client:* 지시어로 렌더링된 컴포넌트에서는 브라우저 콘솔에 기록됩니다.
console.log(data);

const Movies: FunctionalComponent = () => {
  // 결과를 페이지에 출력
  return <div>{JSON.stringify(data)}</div>;
};

export default Movies;
```

## GraphQL 쿼리

Astro에서 유효한 GraphQL 쿼리를 GraphQL 서버에 전달하기 위해 `fetch()` 함수를 사용할 수도 있습니다.

```astro title="src/components/Film.astro" "await fetch"
---
const response = await fetch("https://swapi-graphql.netlify.app/.netlify/functions/index",
  {
    method: 'POST',
    headers: {'Content-Type':'application/json'},
    body: JSON.stringify({
      query: `
        query getFilm ($id:ID!) {
          film(id: $id) {
            title
            releaseDate
          }
        }
      `,
      variables: {
        id: "ZmlsbXM6MQ==",
      },
    }),
  });

const json = await response.json();
const { film } = json.data;
---
<h1>스타워즈: 새로운 희망에 대한 정보를 가져오는 중</h1>
<h2>제목: {film.title}</h2>
<p>출시 연도: {film.releaseDate}</p>
```

## 헤드리스 CMS에서 데이터 가져오기

Astro 컴포넌트는 즐겨 사용하는 CMS에서 데이터를 가져온 다음 이를 페이지 콘텐츠로 렌더링할 수 있습니다. [동적 경로](/ko/guides/routing/#동적-경로)를 사용하면 컴포넌트가 CMS 콘텐츠를 기반으로 페이지를 생성할 수도 있습니다.

Astro를 Storyblok, Contentful, WordPress 등 다양한 헤드리스 CMS와 통합하는 방법에 대한 자세한 내용은 [CMS 안내서](/ko/guides/cms/)를 확인하세요.

## 커뮤니티 자료

- [Astro + GraphQL을 사용하여 풀스택 앱 만들기](https://robkendal.co.uk/blog/how-to-build-astro-site-with-graphql/)
